<template>
  <div class="test-con2">
    一通过辅助函数mapstate 访问模块中的属性
    {{ userInfo.name }}
    {{ count }}
    <hr>
    二通过辅助函数mapGetters 访问 大写的名字：{{ upperCaseName }}
    <hr>
    三通过辅助函数mapMutations修改用户信息
    <button @click="changeUser">修改用户名称</button>
    <hr>
    四通过辅助函数mapActions异步修改用户信息
    <button @click="syncChangeUser">异步修改用户信息</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['count']),
    // 使用限制命名空间的方式，需要在user.js开启通过命名空间访问
    ...mapState('user', ['userInfo']),
    ...mapGetters('user', ['upperCaseName'])
  },
  methods: {
    ...mapMutations('user', ['changeUserInfo']),
    ...mapActions('user', ['syncChangeUserInfo']),
    changeUser () {
      const userInfo = { name: 'wangwu', age: 33 }
      this.changeUserInfo(userInfo)
    },
    syncChangeUser () {
      const userInfo = { name: 'maliu', age: 90 }

      this.syncChangeUserInfo(userInfo)
    }
  }
}
</script>

<style>

</style>
